<template>
    <div class="bg" :style="scaleStyle">
        <div class="date-box">
            <div class="date-name">入职日期</div>
            <div class="date">{{ date[0] || '' }}年</div>
            <div class="date">{{ date[1] || '' }}月</div>
            <div class="date">{{ date[2] || '' }}日</div>
        </div>
        <div class="new-date-box">
            <div class="date-name">至今</div>
            <div class="date">{{ newDate[0] || '' }}年</div>
            <div class="date">{{ newDate[1] || '' }}月</div>
            <div class="date">{{ newDate[2] || '' }}日</div>
        </div>
        <div class="name">{{ query.name || '' }}</div>
        <div class="content">您已入职</div>
        <div class="day-box">
            <span class="day">{{ day }}</span>
            <span class="unit">天</span>
        </div>
        <div class="btn" @click="goBack">返回</div>
    </div>
</template>
<script>
import moment from 'moment'
export default {
    computed: {
        /* 屏幕缩放倍数 */
        scaleStyle() {
            return {
                transform: 'scale(' + this.screenScale.scaleX + ',' + this.screenScale.scaleY + ')'
            }
        }
    },
    data() {
        return {
            screenScale: {
                scaleX: 1,
                scaleY: 1
            },
            query: {},
            date: [],
            newDate: moment().format('YYYY-MM-DD').split('-'),
            day: '0000'
        }
    },
    mounted() {
        this.scale()
        window.addEventListener('resize', this.scale)
        this.$once('hook:beforeDestory', () => {
            window.removeEventListener('resize', this.scale)
        })
        let query = this.$route.query || {}
        this.query = query
        this.date = query.date ? query.date.split('-') : []
        let date1 = moment(query.date);
        let date2 = moment();
        let diffDays = date2.diff(date1, 'days');
        this.day = diffDays;
    },
    methods: {
        /* 界面伸缩 */
        scale() {
            let width = document.body.clientWidth
            let height = document.body.clientHeight
            const scaleX = width / 1080
            const scaleY = height / 1920
            let scale = scaleY < scaleX ? scaleY : scaleX
            this.screenScale = {
                scaleX: scale,
                scaleY: scale
            }
        },
        goBack() {
            history.back();
        }
    }
}

</script>
<style lang="scss" scoped>
.bg {
    width: 1080px;
    height: 1920px;
    background: url('~@/assets/image/date-bg.jpg') no-repeat;
    background-size: 100% 100%;
    transform-origin: top left;
    position: relative;
}

.date-box {
    width: 250px;
    text-align: center;
    color: #fff2d0;
    font-family: 宋体;
    font-weight: bold;
    position: absolute;
    top: 420px;
    left: 233px;
}

.new-date-box {
    width: 250px;
    text-align: center;
    color: #fff2d0;
    font-family: 宋体;
    font-weight: bold;
    position: absolute;
    top: 420px;
    left: 595px;
}

.date-name {
    margin-bottom: 20px;
    font-size: 46px;
}

.date {
    line-height: 70px;
    font-size: 56px;
}

.name {
    position: absolute;
    top: 770px;
    left: 0;
    font-size: 100px;
    color: #fff2d0;
    font-family: serif, 宋体;
    font-weight: bold;
    width: 100%;
    text-align: center;
}

.content {
    position: absolute;
    top: 935px;
    left: 0;
    font-size: 50px;
    color: #fff2d0;
    font-family: 宋体;
    font-weight: bold;
    width: 100%;
    text-align: center;
}

.day-box {
    position: absolute;
    top: 1070px;
    left: 0;
    font-size: 300px;
    font-family: fantasy, 宋体;
    width: 100%;
    text-align: center;
    color: #fff2d0;

    .unit {
        font-size: 80px;
    }
}

.btn {
    width: 400px;
    height: 100px;
    background: url('~@/assets/image/btn.png') no-repeat;
    background-size: 100% 100%;
    color: #fff;
    text-align: center;
    font-size: 44px;
    line-height: 100px;
    font-weight: 900;
    font-family: 宋体;
    position: absolute;
    left: 340px;
    top: 1750px;
}
</style>